<template>
	<view :data-theme="theme">
		<!-- 搜索 -->
		<view class="bg_color" style="padding: 24rpx 24rpx;">
			<u-search v-model="tableForm.name" @custom="searchProduct" @search="searchProduct" placeholder="请输入名称查类品"
				actionText="搜索" :actionStyle="{color:'#FFF'}" shape="square" style="flex: none;"></u-search>
		</view>
		<!-- 分类 -->
		<view class="categories">
			<!-- 左侧：一级分类 -->
			<scroll-view class="primary" scroll-y>
				<view class="item" v-for="(item,index) in categroyData" :key="index" @click="selectCategory(index)"
					:class="{ active: index === selectedCategory }">
					<text class="name">{{item.name}}</text>
				</view>
			</scroll-view>
			<!-- 右侧：二级分类 -->
			<scroll-view class="secondary" scroll-y>
				<!-- 内容区域 -->
				<view style="margin:0 20px;">
					<checkbox-group class="checke_list" v-model="checkboxValue" @change="checkboxChange">
						<view class="uni-list-cell uni-list-cell-pd checke_item"
							v-for="(subItem,subIndex) in categroyData[selectedCategory].childList" :key="subItem.id">
							<view class="item_top">
								<view class="item_img" :class="{active:subItem.checked == true}">
									{{subItem.name}}
								</view>
								<checkbox :value="JSON.stringify(subItem)" borderColor="#fff" activeBorderColor="#fff" :checked="subItem.checked"
									class="round-checkbox" @click="checkbox(subItem,categroyData[selectedCategory])"/>
							</view>
						</view>
					</checkbox-group>
				</view>
			</scroll-view>
		</view>

		<!-- 底部 -->
		<view style="position: fixed;bottom: 0px;width: 100%;padding: 10px;background-color: #fff;">
			<view style="display: flex;">
				<view style="flex: 1;justify-content: space-around;align-items: left;">
					<view
						style="display: flex; font-size: 16px;line-height: 40px;margin-left: 20rpx;">

						<!-- <checkbox-group>
							<label class="uni-list-cell uni-list-cell-pd" style="display: flex;">
								<view>
									<checkbox value="1" />
								</view>
								<view>
									全选
								</view>
							</label>
						</checkbox-group> -->
						<view style="display: flex;">
							<span>已选</span>
							<span style="margin-left: 10px;"
								:style="{color:bgColor}">{{modifiedArray.length ? modifiedArray.length : '0'}}</span>
						</view>
					</view>
				</view>
				<view style="flex: 1;">
					<button class="bg_color" style="font-weight: bold;border-radius: 16rpx;color: #FFF;padding: 20rpx;"
						:color="bgColor" @click="queryAddSort">确认</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getListAllApi,
		getCategoryLisApi
	} from '@/api/category.js'
	import {
		setThemeColor
	} from '../../../utils/setTheme';
	let app = getApp();
	export default {
		data() {
			return {
				bgColor: "#ffffff",
				theme: app.globalData.theme,
				keyword: '',
				tableForm: {
					hidden: 1,
					parentId: 0,
				},
				categroyData: [{
					name: '',
					sonList: [],
				}],
				selectedCategory: 0, //变量，处理分类事件
				checkboxValue: [], //复选框v-model
				allSelect: [], //全选值
				classData: [], //添加的类目数组
				parentName: '', //父级姓名
				modifiedArray: [],
			
			};
		},
		onLoad() {
			this.bgColor = setThemeColor();
			uni.setNavigationBarColor({
				frontColor: '#ffffff',
				backgroundColor: this.bgColor,
			});
			this.getList();
		},
		methods: {
			async getList() {
				const res = await getCategoryLisApi(this.tableForm);
				// const ele = await getListAllApi(this.tableForm);
				this.categroyData = res.data;
				for (let ele of this.categroyData) {
					for (let item of ele.childList) {
						item.checked = false;
						item.parentName = ele.name;
					}
				}
			},
			// 一级分类点击事件，处理下面二级菜单
			selectCategory(index) {
				this.selectedCategory = index; //索引
				let cateValue = this.categroyData[this.selectedCategory];
				console.log(cateValue)
				for (let i = 0; i < cateValue.childList.length; i++) {
					for (let j = 0; j < this.modifiedArray.length; j++) {
						if (cateValue.childList[i].id == this.modifiedArray[j].id) {
							cateValue.childList[i].checked = true;
						}
					}
				};
				console.log('cateValue:', cateValue)
			},
			//单点事件获取值
			checkbox(ele, event) {
				this.parentName = event.name;
				ele.checked = !ele.checked;
				let addValue = ele;
				console.log(addValue)
				if (!this.modifiedArray.some(item => item.id === addValue.id) && addValue.checked == true) {
					let {
						childList,
						icon,
						level,
						sort,
						isShow,
						...newObjWithoutName
					} = addValue; // 使用解构赋值来删除name属性
					this.modifiedArray.push(newObjWithoutName);
				} else {
					this.modifiedArray = this.modifiedArray.filter(item => item.id != addValue.id)
				}
				console.log('this.modifiedArray:', this.modifiedArray)
			},
			//二级分类内容
			checkboxChange(event) {
				this.classData = event.detail.value.map(str => JSON.parse(str)) //添加的类目数组
				console.log('this.classData:', this.classData)
			},

			//确认添加
			queryAddSort() {
				const pages = getCurrentPages(); // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
				const prevPage = pages[pages.length - 2]; // 获取上一级页面对象
				uni.navigateBack({
					delta: 1,
					success: (res) => {
						uni.$emit('shopMessageoTherFun', this.modifiedArray); // 通过事件总线传递数据给上一个页面
					}
				})
			},
			searchProduct() {
				this.getList()
			},
		},
	}
</script>

<style lang="scss">
	.bg_color {
		@include main_bg_color(theme);
	}

	/* 分类 */
	.categories {
		flex: 1;
		min-height: 400rpx;
		display: flex;
	}

	/* 一级分类 */
	.primary {
		overflow: hidden;
		width: 180rpx;
		flex: none;
		background-color: #ffffff;

		.item {
			display: flex;
			justify-content: center;
			align-items: center;
			height: 96rpx;
			font-size: 26rpx;
			color: #595c63;
			position: relative;
			padding: 8px;

			&::after {
				content: '';
				position: absolute;
				left: 42rpx;
				bottom: 0;
				width: 96rpx;
				border-top: 1rpx solid #e3e4e7;
			}
		}

		.active {
			background-color: #fafafa;
			@include main_color(theme);

			&::before {
				content: '';
				position: absolute;
				left: 10rpx;
				top: 50%;
				width: 8rpx;
				height: 8rpx;
				border-radius: 4rpx;
				@include main_bg_color(theme);
			}
		}
	}

	.primary .item:last-child::after,
	.primary .active::after {
		display: none;
	}

	/* 二级分类 */
	.secondary {
		background-color: #fafafa;
		// height: 100%;
		min-height: 845px;

		.carousel {
			height: 200rpx;
			margin: 0 30rpx 20rpx;
			border-radius: 4rpx;
			overflow: hidden;

		}


		.panel {
			display: flex;
			// justify-content: center;
			// align-items: center;
			height: 96rpx;
			font-size: 26rpx;
			color: #595c63;
			background-color: white;
			position: relative;
			margin-left: 20px;
			margin-top: 15px;

			&::after {
				content: '';
				position: absolute;
				left: 42rpx;
				bottom: 0;
				width: 96rpx;
			}
		}

		.checke_list {
			.item_top {
				justify-content: space-between;
				display: flex;
				margin: 20rpx;
				line-height: 70rpx;
			}
		}
		
		.active {
			background-color: #fafafa;
			@include main_color(theme);
		}
	}
</style>